<template>
  <div class="TextStyle">
    <el-form ref="form" :model="datas" label-position="top">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="基础属性" name="1">
          <el-form-item label="文本内容">
            <el-input v-model="datas.words" type="textarea" />
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="字体" name="2">
          <div class="transverse">
            <div class="title">字体颜色</div>
            <div class="form-div">
              <el-color-picker v-model="datas.font.color" />
            </div>
          </div>
          <div class="transverse">
            <div class="title">字体字号</div>
            <div class="form-div">
              <el-select v-model="datas.font.family" placeholder="请选择">
                <el-option
                  v-for="item in family"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
          <div class="transverse">
            <div class="title">字体大小</div>
            <div class="form-div">
              <el-input-number v-model="datas.font.size" controls-position="right" placeholder="请输入字体大小" :min="1" />
            </div>
          </div>
          <div class="transverse">
            <div class="title">字体行高</div>
            <div class="form-div">
              <el-input-number v-model="datas.font.height" controls-position="right" placeholder="请输入字体行高" :min="1" />
            </div>
          </div>
          <div class="transverse">
            <div class="title">字体行高</div>
            <div class="form-div">
              <el-input-number v-model="datas.font.height" controls-position="right" placeholder="请输入字体行高" :min="1" />
            </div>
          </div>
          <div class="transverse">
            <div class="title">字体间距</div>
            <div class="form-div">
              <el-input-number v-model="datas.font.spacing" controls-position="right" placeholder="请输入字体间距" :min="1" />
            </div>
          </div>
          <el-form-item label="字体样式">
            <div class="fontStyle">
              <span @click="fontStyle('weight')">
                <i
                  :style="`font-weight:${datas.font.weight}`"
                  class="iconfont icon-B1"
                />
              </span>
              <span @click="fontStyle('italic')">
                <i
                  :style="`font-weight:${
                    datas.font.italic === 'italic' ? 'bold' : 'unset'
                  }`"
                  class="iconfont icon-xieti"
                />
              </span>
              <span @click="fontStyle('dt-lower')">
                <i
                  :style="`font-weight:${
                    datas.font.decoration === 'line-through' ? 'bold' : 'unset'
                  }`"
                  class="iconfont icon-xiahuaxian"
                />
              </span>
              <span @click="fontStyle('dt-in')">
                <i
                  :style="`font-weight:${
                    datas.font.decoration === 'underline' ? 'bold' : 'unset'
                  }`"
                  class="iconfont icon-zhonghuaxian"
                />
              </span>
            </div>
          </el-form-item>
          <el-form-item label="对齐方式">
            <div class="fontStyle">
              <span @click="fontAlign('left')">
                <i :style="`font-weight:${ datas.font.align === 'left' ? 'bold' : 'unset' }`" class="iconfont icon-zuoduiqi" />
              </span>
              <span @click="fontAlign('center')">
                <i :style="`font-weight:${ datas.font.align === 'center' ? 'bold' : 'unset' }`" class="iconfont icon-juzhongduiqi" />
              </span>
              <span @click="fontAlign('right')">
                <i :style="`font-weight:${ datas.font.align === 'right' ? 'bold' : 'unset' }`" class="iconfont icon-youduiqi" />
              </span>
            </div>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="盒子" name="3">
          <el-form-item label="字体阴影" class="textShadow">
            <el-tooltip class="item" effect="dark" content="水平阴影的位置" placement="top">
              <el-input-number v-model="datas.box.shadow.h" size="small" controls-position="right" :min="-100" :max="100" />
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="垂直阴影的位置" placement="top">
              <el-input-number v-model="datas.box.shadow.v" size="small" controls-position="right" :min="-100" :max="100" />
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="模糊距离" placement="top">
              <el-input-number v-model="datas.box.shadow.blur" size="small" controls-position="right" :min="-100" :max="100" />
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="阴影的颜色" placement="top">
              <el-color-picker v-model="datas.box.shadow.color" size="medium" />
            </el-tooltip>
          </el-form-item>
        </el-collapse-item>
      </el-collapse>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'TextStyle',
  props: {
    datas: Object
  },
  data() {
    return {
      activeNames: ['1', '2'],
      family: [
        { value: '黑体', label: '黑体' },
        { value: '宋体', label: '宋体' },
        { value: 'Arial', label: 'Arial' },
        { value: '华文行楷', label: '华文行楷' },
        { value: '微软雅黑', label: '微软雅黑' },
        { value: 'Verdana', label: 'Verdana' }
      ]
    }
  },
  methods: {
    fontStyle(type) {
      switch (type) {
        case 'weight': {
          const weight = this.datas.font.weight
          weight === 'bold'
            ? (this.datas.font.weight = 'unset')
            : (this.datas.font.weight = 'bold')
          break
        }
        case 'italic': {
          const italic = this.datas.font.italic
          italic === 'italic'
            ? (this.datas.font.italic = 'unset')
            : (this.datas.font.italic = 'italic')
          break
        }
        case 'dt-lower': {
          const decoration = this.datas.font.decoration
          decoration === 'line-through'
            ? (this.datas.font.decoration = 'unset')
            : (this.datas.font.decoration = 'line-through')
          break
        }
        case 'dt-in': {
          const decoration = this.datas.font.decoration
          decoration === 'underline'
            ? (this.datas.font.decoration = 'unset')
            : (this.datas.font.decoration = 'underline')
          break
        }
      }
    },
    fontAlign(type) {
      this.datas.font.align = type
    }
  }
}
</script>

<style lang="scss" scoped>
.TextStyle {
  ::v-deep .el-form-item{
    .el-form-item__label{
      width: 100%;
    }
  }
  .transverse {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    .title {
      margin-right: 15px;
    }
    .form-div {
      display: flex;
      align-items: center;
    }
  }
  .fontStyle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    span {
      background: #f1f4fa;
      width: 22%;
      text-align: center;
      font-size: 20px;
      color: #f1f4fa;
      user-select: none;
      cursor: pointer;
      i {
        color: #575757;
      }
    }
  }
  .textShadow{
    ::v-deep .el-form-item__content{
      display: flex;
      .el-tooltip{
        width: 65px;
        margin-right: 15px;
        text-align: left;
        .el-input-number__decrease{
          width: 20px;
          height: 14px;
          top: 17px;
        }
        .el-input-number__increase{
          width: 20px;
        }
        .el-input__inner{
          padding-right: 25px !important;
          padding-left: 0 !important;
        }
      }
    }
  }
  ::v-deep .el-collapse-item{
    border: 1px solid #ffffff !important;
    background: #F5F8FB;
    .el-collapse-item__header{
      font-size: 16px;
      color: #001529;
      background: #F5F8FB;
      border: unset !important;
      padding-left: 10px;
    }
    .el-collapse-item__wrap{
      border: none !important;
      padding-left: 10px;
    }
  }
}
</style>
